<template>
	<view class="u-page">
		<view class="u-demo-block" v-for="(item,index) in videoList" :key="item.id">
		  <text class="u-demo-block__title">{{item.title}}</text>
		  <view class="u-demo-block__content">
			<view class="album">
			  <view class="album__avatar">
				<image
				  :src="item.avatar"
				  mode=""
				  style="width: 32px;height: 32px;"
				></image>
			  </view>
			  <view class="album__content" @click="gotovideo(item.feedId)">
				<u--text :text="item.title" type="primary" bold size="17"></u--text>
				<u--text
				  margin="0 0 8px 0"
				  :text="item.title"
				></u--text>
				<u-album :previewFullImage="false" class="album_img" :urls="item.urls1" keyName="img"></u-album>
			  </view>
			</view>
		  </view>
		</view>
			
		<u-tabbar
		  :value="value6"
		  @change="name => value6 = name"
		  :fixed="true"
		  :placeholder="true"
		  :safeAreaInsetBottom="true"
		>
		  <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
		  <u-tabbar-item text="放映厅" icon="photo"></u-tabbar-item>
		  <u-tabbar-item text="直播" icon="play-right"></u-tabbar-item>
		  <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value6: 0,
				albumWidth: 0,
				urls1: [
				  {
					src2: "https://uviewui.com/album/1.jpg",
				  },
				],
				videoList:[
					{id: 1, title: '小姨又菜又爱玩', avatar:'/static/imgs/1.png', urls1:[{img: '/static/imgs/1_.png'}], feedId:'替换为自己的视频ID'},
					{id: 2, title: '精忠报国', avatar:'/static/imgs/2.png', urls1:[{img: '/static/imgs/2_.png'}], feedId:'替换为自己的视频ID'},
					{id: 3, title: '什么人群适合学编程', avatar:'/static/imgs/3.png', urls1:[{img: '/static/imgs/3_.png'}], feedId:'替换为自己的视频ID'}
				]
			}
		},
		onLoad() {

		},
		methods: {
			gotovideo(feedId) {
				wx.openChannelsActivity({
					finderUserName: '替换为自己的视频号ID',
					feedId: feedId,
					success(res) {
						console.log('拉起视频成功', res);
					},
					fail(res) {
						console.log('拉起视频失败', res);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-demo-block {
		padding: 5px 20px;
		.u-demo-block__title{
			font-size: 24px;
		}
		.album__avatar {
			border-radius: 50px;
		}

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.album {
	    @include flex;
	    align-items: flex-start;
	
	    &__avatar {
	      background-color: $u-bg-color;
	      padding: 5px;
	      border-radius: 3px;
	    }
	
	    &__content {
	      margin-left: 10px;
	      flex: 1;
	    }
	  }
</style>
